<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


<body>
    <div id="test"></div>
</body>



<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js"></script>
<script
    src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>

<script type="text/babel"> //必须声明 babel
    class Form extends React.Component {
        handleSubmit = (event) => {
            event.preventDefault();
            const { username, password } = this
            alert(`用户名是${username.value},密码是${password.value}`)
        }

        render() {
            return (
                <form onSubmit={this.handleSubmit}>
                    <input type="text" name='username' ref={c => this.username = c} />
                    <input type="text" name='password' ref={c => this.password = c} />
                    <button>登录</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Form />, document.getElementById('test'))
</script>

</html>